<template>
  <div class="user-login">
    <vua-modal v-model="modelValue">
      <div class="user-login__wrapper">
        <div class="close" @click="toClose">
          <close />
        </div>

        <div class="user-login__login">
          <div class="title">用户注册</div>
          <div class="input">
            <el-input v-model="username" placeholder="请输入用户名" ref="userRef" />
            <el-input v-model="password" type="password" placeholder="请输入密码" />
            <el-input
              v-model="password2"
              type="password"
              placeholder="请输入确认密码"
              @keyup.enter="toUserLogin"
            />
            <el-button type="primary" @click="toUserLogin">注册</el-button>
            <p style="color: #007fff; cursor: pointer">其他登录方式</p>
          </div>
        </div>
      </div>
    </vua-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'
import VuaModal from '/@/components/modal/Modal'
import { Close } from '@element-plus/icons-vue'

import { userLogin } from '/@/api/users/usersActive'

import router from '/@/router'

const props = defineProps({
  modelValue: Boolean
})

const emits = defineEmits(['update:modelValue'])

let { modelValue } = toRefs(props)

let username = ref('')
let password = ref('')
let password2 = ref('')

const toClose = () => {
  username.value = ''
  password.value = ''
  password2.value = ''
  emits('update:modelValue', false)
}

const toUserLogin = () => {
  if (username.value === '' || password.value === '') {
    alert('用户名密码不能为空')
    return false
  }
  userLogin({ userName: username.value, passWord: password.value }).then((res) => {
    console.log(res.data.data)
    if (res.data?.code == 200) {
      localStorage.setItem('token', res.data.data.token)
      localStorage.setItem('userId', res.data.data.userId)
      router.go(0)
    } else {
      password.value = ''
      alert('用户名密码错误')
    }
  })
}

const userRef = ref(null)
watch(userRef, (userInput: any) => {
  userInput?.input?.focus()
})
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  height: 40px;
}
:deep(.el-button) {
  height: 40px;
}

.user-login {
  &__wrapper {
    width: 480px;
    height: 380px;
    border-radius: 8px;
    background-color: white;

    padding: 40px;

    box-sizing: border-box;

    position: absolute;

    .close {
      position: absolute;
      top: 20px;
      right: 20px;

      width: 18px;
      height: 18px;

      cursor: pointer;
    }

    .user-login__login {
      width: 100%;
      height: 100%;

      //   background-color: #eee;

      .title {
        font-size: 18px;
        cursor: pointer;
        text-align: center;
      }

      .input {
        height: 220px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;

        justify-content: space-between;
      }
    }
  }
}
</style>
